<template>
  <h1>隐藏显示指令</h1>
  <p v-if="true">张三</p>
  <p v-if="false">李四</p>
  <hr>
  <p v-show="true">小红</p>
  <p v-show="false">小绿</p>
  <hr>
  <h4 v-if="isShow">太阳</h4>
<!-- v-else表示找距离自己最近的v-if进行取反 -->
  <h4 v-else>月亮</h4>
</template>

<script setup>
import {ref} from "vue";
// isShow给的是太阳,太阳为true,月亮就为false不显示,反之太阳为false,则月亮为true
const isShow = ref(false);
</script>

<style scoped>

</style>